<template>
    <div class="search">
        <div class="sear" :style="style">
            <svg class="icon qb" aria-hidden="true">
                <use xlink:href="#icon-search"></use>
            </svg>
            <span v-text="placeholder"></span>
        </div>
    </div>
</template>

<script>
const WIDTH = '84.53333333333333vw';
export default {
    name: "search",
    props: {
        placeholder: {
            type: String
        },
        width: {
            type: String,
            default: WIDTH
        }
    },
    data(){
        return{
            style: {
                width: this.width
            }
        }
    },
    mounted() {
        console.log('search,,,,', this.placeholder , this.width)
    }
}
</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>
    @import '~@/assets/main.styl'
    .search {
        margin smallMargin 0
    }
    .sear {
        height vw(30)
        border 1px solid main-color
        border-radius all-radius
        display flex
        align-items center
        & .qb{
            width vw(15)
            height vw(15)
            overflow hidden
            fill main-color
            margin-left middleMargin
        }
        span {
            word-vw(word12, gray9)
            margin-left middleMargin
        }
    }
</style>